<template>
	<view>
		<!--  月嫂家庭知识   激励课程 -->
		<view class="row1">
			<scroll-view class="row1" scroll-x="true">
				<view class="list show">
					月嫂家庭知识
				</view>
				<view class="list">
					激励课程
				</view>
				<view class="list">
					法商护航
				</view>
				<view class="list">
					房产经济
				</view>
			</scroll-view>
		</view>
		<!-- main -->
		<view class="row2 bor">
			<view class="head">
				<image class="img" src="../../static/zonghe/bgc.png" mode=""></image>
				<view class="txt">
					家庭教育小知识
				</view>
			</view>
			<view class="row-1" @click="router">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
			<view class="row-1">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="row2 bor">
			<view class="head">
				<image class="img" src="../../static/zonghe/bgc.png" mode=""></image>
				<view class="txt">
					家庭教育小知识
				</view>
			</view>
			<view class="row-1">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
			<view class="row-1">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="row2 bor">
			<view class="head">
				<image class="img" src="../../static/zonghe/bgc.png" mode=""></image>
				<view class="txt">
					家庭教育小知识
				</view>
			</view>
			<view class="row-1">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
			<view class="row-1">
				<view class="txt">
					家庭常识100例
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			router(){
				uni.navigateTo({
					url:'../article/article'
				})
			}
		}
	}
</script>

<style lang="scss">
	.bor {
		box-shadow: 0px 0px 8rpx 0rpx #e2e2e2;
		border: 1px solid rgba(255, 0, 0, 0);
		border-radius: 15rpx;
		background-color: #fff;
	}

	.row1 {
		margin: 0 10rpx;
		margin-top: 20rpx;
		color: #999999;
		font-size: 36rpx;
		width: 100%;
		white-space: nowrap;

		.list {
			display: inline-block;
			margin-right: 40rpx;
		}

		.show {
			font-weight: 550;
			color: rgba(51, 51, 51, 100);
			font-size: 36rpx;
			position: relative;
		}

		.show::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 95%;
			height: 10rpx;
			margin: auto;
			border-radius: 25rpx;
			background-color: #ff9204;
			z-index: -1;
		}
	}

	.row2 {
		width: 80%;
		margin: 30rpx auto;

		.head {
			height: 220rpx;
			position: relative;

			.txt {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				font-weight: 550;
			}
		}

		.row-1 {
			display: flex;
			justify-content: space-between;
			margin: 20rpx;
			border-bottom: 2rpx solid #dddddd;
			padding-bottom: 20rpx;

			.txt {
				line-height: 88rpx;
			}

			.image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}
</style>
